<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS 依赖注入</title>
    <script src="js/angular.min.js"></script>
</head>
<body>
<h2>AngularJS 简单应用</h2>
<div ng-app="mainApp" ng-controller="CalcController">
    <p>请输入一个数字: <input type="number" ng-model="number"></p>
    <button ng-click = "square()">X<sup>2</sup></button>
    <p>结果: {{result}}</p>
</div>
<script>
    var mainApp = angular.module('mainApp', []);
    mainApp.config(function ($provide) {
        $provide.provider('MathService', function () {
            this.$get = function () {
                var factory = {};

                factory.multiply = function (a, b) {
                    return a * b;
                }

                return factory;
            }
        })
    });

    mainApp.value('defaultInput', 5);

    mainApp.factory('MathService', function () {
        var factory = {};

        factory.multiply = function (a, b) {
            return a * b;
        }

        return factory;
    });

    mainApp.service('CalcService', function (MathService) {
        this.square = function (a) {
            return MathService.multiply(a, a);
        }
    });

    mainApp.controller('CalcController', function ($scope, CalcService, defaultInput) {
        $scope.number = defaultInput;
        $scope.result = CalcService.square($scope.number);
        $scope.square = function () {
            $scope.result = CalcService.square($scope.number);
        }
    })
</script>
</body>
</html>